<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../Run/base.css">
    <link rel="stylesheet" href="../Run/font.css">
    <link rel="stylesheet" href="../Run/button.css">
    <link rel="stylesheet" href="./css/Brand.css">
</head>
<body>
<div class="container">
    <div class="brand-container">
        <div class="left">
            <div class="letter">
                <span class='cur' data-type="all">所有品牌</span>
                <span data-type="hot">热门品牌</span>
                <span data-letter="A">A</span>
                <span data-letter="B">B</span>
            </div>
            <div class="brand">

                <div class="item" data-id="1" data-hot="y" data-letter="A" data-name="华为">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">华为</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="B" data-id="2" data-name="奥迪">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">奥迪</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="c" data-id="3" data-name="宝马">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">宝马</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="A" data-id="1">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">华为</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="B" data-id="2">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">奥迪</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="c" data-id="3">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">宝马</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="c" data-id="3">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">宝马</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <!-- 第二排 -->
                <div class="item" data-letter="A" data-id="1">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">华为</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="B" data-id="2">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">奥迪</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="c" data-id="3">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">宝马</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="A" data-id="1">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">华为</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="B" data-id="2">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">奥迪</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="c" data-id="3">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">宝马</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="c" data-id="3">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">宝马</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <!-- 第三排 -->
                <div class="item" data-letter="A" data-id="1">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">华为</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="B" data-id="2">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">奥迪</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="c" data-id="3">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">宝马</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="A" data-id="1">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">华为</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

                <div class="item" data-letter="B" data-id="2">
                    <div class="logo full">
                        <img src="image/huawei.jpg" class="image">
                    </div>
                    <div class="name full">奥迪</div>
                    <div class="status hide"><img src="image/selected.png" class="image"></div>
                </div>

            </div>
            <div class="selected">
                <h4 class="header weight">已选择的品牌：</h4>
                <p class="brand">
                    <!--<span>华为</span>-->
                    <!--<span>奥迪</span>-->
                    <!--<span>宝马</span>-->
                </p>
            </div>
            <div class="function hide">
                <button type="button" class="run-button run-button-blue confirm">确定</button>
                <button type="button" class="run-button run-button-orange cancel">取消</button>
            </div>
        </div>
        <div class="right">
            <button type="button" class="run-button run-button-blue ctrl">+展开</button>
            <button type="button" class="run-button run-button-blue mode">多选</button>
        </div>
    </div>
</div>
<script src="../SmallJs/SmallJs.js"></script>
<script src="./js/Brand.js"></script>
<script>
    var container = G('.container');
    var brand = new Brand(container.get(0) , {
        pluginUrl: '' ,
        // 模式
        multiple: true ,
        selected: function(id , idList){
            console.log('selected' , id , idList);
        } ,
        unselected: function(id , idList){
            console.log('unselected' , id , idList);
        } ,
    });
</script>
</body>
</html>